<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue基础-搭建</title>
		<script src="./vue.js"></script>
		

	</head>
	<body>
		<div id="app">
			{{ msg }}
			<h1>{{ msg }}</h1>
			<span>{{ username }}</span>
			<h1>{{ i==1 ? 'a' : 'b' }}</h1>
			<h1 v-if="false">h1</h1>
			<h1 v-show="true">h1</h1>
			<a href="" v-show="flag">登录</a>
			<a href="" v-show="!flag">个人中心</a>
			<h1 v-bind:aaa="username" alc="sss">{{username}}</h1>
			<a v-bind:href="username">链接</a>
			<a :href="username">链接</a>
			<hr>
			<h1 v-text="username"></h1>
			<span>{{elment}}</span>
			<br>
			<span v-text="elment"></span>
			<br>
			<span v-html="elment"></span>
			
			<button type="button" v-on:click="add">按钮</button>
			<button type="button" v-on:click="edit(msg)">按钮</button>
			<input type="text" v-on:keyup.up="key()">按钮</input>
			
			<input type="text" @click="key()">按钮</input>
			
			<input type="text" v-model="name">
			{{name}}			
			<input type="text" v-model="student.name">
			<input type="text" v-model="student.age">
			<input type="text" v-model="student.address">
			
			
		</div>
		
		<div class="share_top_style">
		        <a href="javascript:void()" class="" onClick="dofristshare('sina')"><img src="images/sina.png" alt="新浪微博"></a>
		
		        <a href="javascript:void()" class="" onClick="dofristshare('tx')"><img src="images/tx.png" alt="腾讯微博"></a>
		
		        <a href="javascript:void()" class="" onClick="dofristshare('rr')"><img src="images/rr.png" alt="人人网"></a>
		
		        <a href="javascript:void()" class="" onClick="dofristshare('qzone')"><img src="images/qq.png" alt="QQ空间"></a>
		
		        <a href="javascript:void()" class="" onClick="dofristshare('douban')"><img src="images/db.png" alt="豆瓣"></a>
		 </div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				msg:"hello vue",
				username:"张然",
				i : 1,
				flag:false,
				elment:"<h1>一级</h1>",
				name:"张三",
				student:{}
			},
			methods:{
				add(){
					//alert(this.name)
					alert(JSON.stringify(this.student) )
				},
				edit(id){
					alert(id)
				},
				key(){
					alert(312)
				}
			},
			beforeCreate() {
				console.log("beforeCreate")
			},
			created() {
				console.log("create")
			},
			beforeMount() {
				console.log("beforeMount")
			},
			mounted() {
				console.log("mounted");
			},
			beforeUpdate() {
				console.log("beforeUpdate")
			},
			updated() {
				console.log("updated")
			},
			beforeDestroy() {
				console.log("beforeDestroy")
			},
			destroyed() {
				console.log("destroyed")
			}
		})
		
		
		function dofristshare(type) {
		    var title = encodeURIComponent("新年快乐,马年吉祥");
		    var link = encodeURIComponent('http://www.baidu.com');
		    var image = encodeURIComponent('http://www.baidu.com/img/bdlogo.gif');
		
		    if (type == "sina") {
		        window.open("http://v.t.sina.com.cn/share/share.php?url=" + link + "&title=" + title + "&content=utf8&pic=" + image);
		    }
		
		    if (type == "tx") {
		        window.open("http://v.t.qq.com/share/share.php?url=" + link + "&title=" + title + "&pic=" + image);
		    }
		
		    if (type == "qzone") {
		        window.open("http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" + link + "&title=" + title  + "&pics=" + image);
		    }
		
		    if (type == "rr") {
		        window.open("http://widget.renren.com/dialog/share?resourceUrl=" + link + "&title=" + title  + "&pic=" + image);
		    }
		
		   if (type == "douban") {
		        window.open("http://www.douban.com/recommend/?url=" + link + "&title=" + title + "&image=" + image);
		    }
		
		    return false;
		
		}
	</script>
</html>
